<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sortable Table</title>
  <!-- 引入 element-ui 的样式文件 -->
  <link rel="stylesheet" href="../../element/element.css">
  <script src="../../element/vue.js"></script>
  <script src="../../element/index.js"></script>
  <script src="../../js/axios.min.js"></script>
  <script src="../../element/moment.min.js"></script>
  <link rel="stylesheet" href="../../css/table.css">
  <style>
    .zebra-table tbody tr:nth-child(even) {
            background-color: #edecec; /* 设置偶数行的背景颜色 */
        }
        .card-container {
      display: flex;
    }
        .card-container .el-card:nth-child(odd) {
      border: 2px solid #B8860B;
    }

    .card-container .el-card:nth-child(even) {
      border: 2px solid #B8860B;
    }
 


    .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 20px; /* 添加上边距 */
        margin-bottom: 20px; /* 添加下边距 */
        }

        .card-item {
        width: 30%;
        margin: 20px 0; /* 上下各添加20像素的外边距 */
        padding: 10px; /* 添加内边距 */
        border: 1px solid gold;
        }

        @media (max-width: 768px) {
        .card-item {
            width: 48%;
        }
        }

        @media (max-width: 480px) {
        .card-item {
            width: 100%;
        }
    }
  
  </style>
</head>

<link rel="stylesheet" href="../../css/evaluate.css">

<body>
  <div id="app">

    <el-dialog :visible.sync="dialogVisible" title="募捐申请表单">
      <el-form @submit.native.prevent="submitForm('donationForm')" :model="form" ref="donationForm">
        <el-form-item label="化名" prop="alias">
          <el-input v-model="form.alias" required></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" required></el-input>
        </el-form-item>
        <el-form-item label="募捐原因" prop="donationReason">
          <el-input v-model="form.donationReason" required></el-input>
        </el-form-item>
        <el-form-item label="截止时间" prop="deadline">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.deadline" required
            format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="募捐时间原因" prop="timeReason">
          <el-input v-model="form.timeReason" required></el-input>
        </el-form-item>
        <el-form-item label="募捐金额" prop="donationAmount">
          <el-input v-model="form.donationAmount" required></el-input>
        </el-form-item>
        <el-form-item label="募捐金额原因" prop="amountReason">
          <el-input v-model="form.amountReason" required></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('donationForm')">提交</el-button>
          <el-button @click="resetForm('donationForm')">重置</el-button>
        </el-form-item>
      </el-form>


    </el-dialog>
    请选择募捐人:<el-select v-model="personId" placeholder="请选择募捐人" @change="handleSelectChange">
      <el-option v-for="person in persons" :key="person.personId" :label="person.personName" :value="person.personId">
      </el-option>
    </el-select>
    <el-button @click="openForm" type="primary">填写募捐申请</el-button>
    <el-button @click="changeStyle" type="primary">切换卡片样式</el-button>

    <template class="zebra-table" v-if="tableStyle === 'table'">
      <el-table :data="donationList" :default-sort="{prop: 'deadline', order: 'ascending'}" v-loading="loading"
        @row-click="search">
        <el-table-column label="募捐ID" prop="donationId"></el-table-column>
        <el-table-column label="募捐人" prop="donationImage">
          <template slot-scope="scope">
            <img :src="`http://${scope.row.donationImage}`" style="width: 50px; height: 50px;" />
            <p>{{ scope.row.alias }} {{ scope.row.age }}岁</p>
          </template>
        </el-table-column>
        <el-table-column label="募捐原因" prop="donationReason"></el-table-column>
        <el-table-column label="截止时间" prop="deadline"></el-table-column>
        <el-table-column label="救助金额" prop="donationAmount"></el-table-column>
        <el-table-column label="已募金额" prop="donatedAmount"></el-table-column>
        <el-table-column label="完成度" prop="completion" sortable></el-table-column>
        <el-table-column label="积分" prop="materialPoints"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            {{ getStatusText(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="goToSubmitDonation(scope.row)">进入募捐详情页面</el-button>
            <el-button type="text" @click="handleRowExpand(scope.row)">查看评价</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <template v-else>
      <div class="card-container">
        <el-card v-for="item in donationList" :key="item.donationId" class="card-item">
          <img width="400px" height="400px" :src="`http://${item.donationImage}`" class="item-image" />
          <p><strong>募捐人：</strong>{{ item.alias }} ({{ item.age }}岁)</p>
          <p><strong>募捐原因：</strong>{{ item.donationReason }}</p>
          <p><strong>截止时间：</strong>{{ item.deadline }}</p>
          <p><strong>救助金额：</strong>{{ item.donationAmount }}</p>
          <p><strong>已募金额：</strong>{{ item.donatedAmount }}</p>
          <p><strong>完成度：</strong>{{ item.completion }}</p>
          <p><strong>积分：</strong>{{ item.materialPoints }}</p>
          <p><strong>状态：</strong>{{ getStatusText(item.status) }}</p>
          <el-button type="text" @click="goToSubmitDonation(item)">进入募捐详情页面</el-button>
          <el-button type="text" @click="handleRowExpand(item)">查看评价</el-button>
        </el-card>
      </div>
    </template>

    <el-dialog :visible.sync="showEvaluation" title="评价信息">
      <div v-for="(item, index) in expandRowData" :key="index" class="outer-content">
        <div class="left-content">
          <p>
          <h3>募捐单ID: 同盾{{ item.donationId }}号募捐单</h3>
          </p>
          <p><strong>申请ID:</strong> {{ item.requestId }}</p>
          <p><strong>时间:</strong> {{ item.time.substring(0, 10) }}</p>
          <p><strong>状态:</strong> <strong>{{ item.reply }}</strong></p>
        </div>
        <div class="right-content">
          <el-table :data="item.list">
            <el-table-column label="评价人账号" prop="userId"></el-table-column>
            <el-table-column label="建议情况" prop="status"></el-table-column>
            <el-table-column label="评价金额" prop="donationAmount"></el-table-column>
            <el-table-column label="评价内容" prop="message"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>

  </div>

  <script>
    var userId = localStorage.getItem('userId');
    // 创建 Vue 实例
    new Vue({
      el: '#app',
      data: {
        tableStyle: 'table',
        showEvaluation: false,
        statusMap: {
          1: '已保存',
          2: '已删除',
          3: '已提交',
          4: '审核中',
          5: '已发布',
          6: '已完结',
          7: '异常'
        },
        persons: [],
        donationList: [],
        expandRow: true,
        expandRowData: {},
        loading: false,
        showInputForm: false,
        personId: null,
        personName: "",

        dialogVisible: false,
        form: {
          personId: "",
          alias: '',
          age: '',
          donationReason: '',
          deadline: '',
          donationAmount: '',
          timeReason: '',
          amountReason: ''
        }
      },
      created() {
        this.searchPersons()
        // this.search(); // 页面加载时自动触发查询
      },
      methods: {
        changeStyle() {
          if (this.tableStyle === 'table') {
            this.tableStyle = 'card';
          } else {
            this.tableStyle = 'table';
          }
        },
        goToSubmitDonation(row) {
          // 在这里编写跳转逻辑
          localStorage.setItem("donationId", row.donationId);
          //
          if (row.status == 1||row.status == 3||row.status == 4) {
            window.location.href = "./submitDonation.html";
          }
          if (row.status == 5) {
            window.location.href = "./donationActivity.html";
          }
        },
        searchPersons() {
          axios.get('http://localhost:8888/api/persons/getPersons', {
            params: {
              userId: userId
            }
          })
            .then(response => {
              this.persons = [];
              this.persons = response.data.data;
            })
            .catch(error => {
              // 请求失败时的处理
              console.error('请求出错：', error);
            });
        },
        search() {
          axios.post('http://localhost:8888/api/donation/queryDonationByPersonId', {
            personId: this.personId,
          }
          )
            .then(response => {
              this.donationList = [];
              this.donationList = response.data.data;
              this.calculateCompletion();
            })
            .catch(error => {
              // 请求失败时的处理
              console.error('请求出错：', error);
            });
        },
        calculateCompletion() {
          this.donationList.forEach(item => {
            item.completion = (item.donatedAmount / item.donationAmount * 100).toFixed(2) + '%';
            // 截取日期部分，只保留年月日
            item.deadline = item.deadline.substring(0, 10);

          });
        },
        handleRowExpand(row) {
          this.showEvaluation = !this.showEvaluation;
          // 发起请求获取评价数据
          if (this.expandRow) {
            axios.get('http://localhost:8888/api/evaluate/getAllByDonationId', {
              params: {
                donationId: row.donationId
              }
            })
              .then(response => {
                this.loading = false;
                if (response.data.code === 0) {
                  this.expandRowData = response.data.data;

                } else if (response.data.code === 2) {
                  this.expandRowData = [];
                } else {
                  this.expandRowData = null;
                }
              })
              .catch(error => {
                this.loading = false;
                console.error('请求出错：', error);
              });
          }
        },
        handleSelectChange() {
          this.search(); // 页面加载时自动触发查询
        },
        openForm() {
          if (this.personId == null) {
            alert("请先选择募捐人")
          }
          else {
            this.dialogVisible = true;
          }

        },
        submitForm(formName) {
          this.form.personId = this.personId;
          this.$refs[formName].validate((valid) => {
            if (valid) {
              // 处理日期格式
              const date = new Date(this.form.deadline);
              const formattedDate = date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
              this.form.deadline = formattedDate;
              // 构造请求参数
              // 发送POST请求
              axios.post('http://localhost:8888/api/donation/create', this.form)
                .then(response => {
                  alert("募捐申请成功")
                  console.log('表单提交成功', response.data);
                  // 提交成功后的逻辑
                  this.search()
                  this.resetForm(formName);
                  this.dialogVisible = false;
                })
                .catch(error => {
                  console.error('表单提交失败', error);
                  // 处理提交失败的逻辑
                });
            } else {
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
      },
      computed: {
        getStatusText() {
          return (status) => {
            return this.statusMap[status];
          }
        },

      },
    });
  </script>
</body>

</html>